<template>
  <div>
    <!-- 面包屑部分 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据上传</el-breadcrumb-item>
      <el-breadcrumb-item>测试数据上传</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-steps :active="1" align-center simple>
        <el-step title="社会背景信息"></el-step>
        <el-step title="扫描状态信息"></el-step>
        <el-step title="扫描仪器信息"></el-step>
        <el-step title="人体测量数据信息"></el-step>
      </el-steps>
      <el-row>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="80px" class="demo-ruleForm">
          <el-col :span="8" class="border-right">
            <h3>必填信息</h3>
            <el-form-item label="姓名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
            <el-form-item label="性别" prop="name">
              <el-select v-model="value" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
            </el-form-item>
            <el-form-item label="出生日期" prop="name"><el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker></el-form-item>
            <el-form-item label="年龄" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
            <el-form-item label="成长地" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
          </el-col>
          <el-col :span="7" class="border-right height-max">
            <h3>推荐填写信息</h3>
            <el-form-item label="职业" prop="name">
              <el-select v-model="value" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
            </el-form-item>
            <el-form-item label="教育程度" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
          </el-col>
          <el-col :span="9">
            <h3>选填信息</h3>
            <el-form-item label="居住地" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
            <el-form-item label="出生地" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
            <el-form-item label="是否模特" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
            <el-form-item label="是否经常运动" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row class="footer"><el-button type="primary" disabled>上一步</el-button><el-button type="success">下一步</el-button></el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      rules: {},
      options: [
        {
          value: '选项1',
          label: '男'
        },
        {
          value: '选项2',
          label: '女'
        }
      ],
      value: ''
    }
  }
}
</script>

<style lang="less" scoped>
.el-steps {
  margin-bottom: 30px;
}
.el-col {
  padding-left: 30px;
  padding-right: 30px;
}
.footer {
  display: flex;
  justify-content: space-between;
  padding: 30px;
}
.border-right {
  border-right: 1px solid #eee;
}
.el-form .height-max {
  height: 375px;
}
</style>
